<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程实例</title>
    <!-- 引入 core包 -->
    <link rel="stylesheet" href="./logicflow/core/dist/style/index.css" />
    <script src="./logicflow/core/dist/logic-flow.min.js"></script>
    <!-- 引入 extension包样式 -->
    <link rel="stylesheet" href="./logicflow/extension/lib/style/index.css" />
    <!-- 插件支持单个引入，这里以菜单插件为例 -->
    <script src="./logicflow/extension/lib/Menu.js"></script>
    <!-- 拖拽 -->
    <script src="./logicflow/extension/lib/DndPanel.js"></script>
    
    <script src="./logicflow/extension/lib/Control.js"></script>
    
    <script src="./logicflow/extension/lib/Group.js"></script>
    <!--选中项-->
    <script src="./logicflow/extension/lib/SelectionSelect.js"></script>
    
    <script src="./logicflow/extension/lib/BpmnAdapter.js"></script>
    
    <script src="./logicflow/extension/lib/BpmnElement.js"></script>
    <!--下载截图-->
    <script src="./logicflow/extension/lib/Snapshot.js"></script>
    <!-- 小地图 -->
    <script src="./logicflow/extension/lib/MiniMap.js"></script>
    <script src="./logicflow/extension/lib/NodeResize.js"></script>

    <script src="./logicflow/extension/lib/CurvedEdge.js"></script>
    <!-- 内容转换 xml 或者 json -->
    <script src="./logicflow/extension/lib/lfJson2Xml.js"></script>
    <script src="./logicflow/extension/lib/lfXml2Json.js"></script>

    
    <script src="./logicflow/tool.js"></script>

    <script src="./logicflow/snakerflow/task/index.js"></script>
    <script src="./logicflow/snakerflow/fork/index.js"></script>
    <script src="./logicflow/snakerflow/custom/index.js"></script>
    <script src="./logicflow/snakerflow/join/index.js"></script>
    <script src="./logicflow/snakerflow/start/index.js"></script>
    <script src="./logicflow/snakerflow/end/index.js"></script>
    <script src="./logicflow/snakerflow/decision/index.js"></script>
    <script src="./logicflow/snakerflow/subProcess/index.js"></script>
    <script src="./logicflow/snakerflow/wfSubProcess/index.js"></script>
    <script src="./logicflow/snakerflow/transition/index.js"></script>
    
    <script src="./logicflow/js/jquery.min.js"></script>
    <!--基础节点信息 -->
    <script src="./logicflow/js/node.js"></script>
    <link rel="stylesheet" href="./logicflow/css/index.css" />
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .lf-control-clear {
            background-image: url("");
        }
        .lf-control-save {
            background-image: url("");
        }
        .lf-control-see {
            background-image: url("");
        }
        .lf-control-import {
            background-image: url("");
        }
        .lf-control-setting{
            background-image: url("");
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 按钮操作 -->
        <div class="example-header">
            <div class="tools">
                <span>logicflow 流程信息111</span>
            </div>
        </div>

        <!--绘制中间图形-->
        <div class="bpmn-example-container" >
            <div id="graph" class="viewport" ></div>
        </div>

        <!--属性面板-->
        <div class="property-panel"  id="test" style="display: none;" >
            <div>
                <h2>属性面板</h2>
                
                <div>
                <h3>......</h3>
                <h3>业务属性可根据需要进行自定义扩展</h3>
                </div>
                <div class="property-panel-footer">
                    <button class="property-panel-footer-hide"
                    onclick="hidePropertyPanel()">
                    收起
                    </button>
                </div>
            </div>
        </div>

        <!--操作模型-->
        <div class="graph-io">
            <span
            title="下载 XML"
            onclick="downloadXml()">
            <img src="./logicflow/img/download.png" alt="下载XML" />
            </span>
            <span
            id="download-img"
            title="下载图片"
            onclick="downloadImage()">
            <img src="./logicflow/img/img.png" alt="下载图片" />
            </span>
            <span
            id="upload-xml"
            title="上传 XML">
            <input type="file" class="upload" accept=".xml" onchange="uploadXml(event)"/>
            <img src="./logicflow/img/upload.png" alt="上传XML" />
            </span>
            <span
            title="下载 json"
            onclick="downloadJson()">
            <img src="./logicflow/img/json.png" alt="下载json" />
            </span>
        </div>
    </div>
</body>
<script type="text/javascript">

    const lf = new LogicFlow({
        container: document.querySelector("#graph"),
        stopScrollGraph: true,
        stopZoomGraph: true,
        metaKeyMultipleSelected: true,
        grid: {
            size: 10,
            type: 'dot',
        },
        keyboard: {
            enabled: true,
        },
        snapline: true,
        //引入插件
        plugins: [Menu,DndPanel,Group, SelectionSelect,BpmnAdapter,BpmnElement,MiniMap,Control,NodeResize,Snapshot]
    });

    // 注册自定义元素
    lf.register(Task);
    lf.register(Transition);
    lf.register(Custom);
    lf.register(Start);
    lf.register(End);
    lf.register(Decision);
    lf.register(Join);
    lf.register(Fork);
    lf.register(SubProcess);
    lf.register(WfSubProcess);

    //小地图
    lf.extension.control.addItem({
        key: 'mini-map',
        iconClass: "lf-control-setting",
        title: "",
        text: "导航",
        onMouseEnter: (lf, ev) => {
            const position = lf.getPointByClient(ev.x, ev.y);
            lf.extension.miniMap.show(
            position.domOverlayPosition.x - 120,
            position.domOverlayPosition.y + 35
            );
        },
        onClick: (lf, ev) => {
            const position = lf.getPointByClient(ev.x, ev.y);
            lf.extension.miniMap.show(
            position.domOverlayPosition.x - 120,
            position.domOverlayPosition.y + 35
            );
        },
    });

    // 控制面板-清空画布
    lf.extension.control.addItem({
        iconClass: 'lf-control-clear',
        title: 'clear',
        text: '清空',
        onClick: (lf, ev) => {
          lf.clearData()
        }
      });
      // 控制面板-添加查看按钮
    //   lf.extension.control.addItem({
    //     iconClass: 'lf-control-see',
    //     title: '',
    //     text: '查看',
    //     onClick: (lf, ev) => {
    //     }
    //   });
      // 控制面板-添加导入按钮
    //   lf.extension.control.addItem({
    //     iconClass: 'lf-control-import',
    //     title: '',
    //     text: '导入',
    //     onClick: (lf, ev) => {
    //     }
    //   });
      // 控制面板-清空画布
      lf.extension.control.addItem({
        iconClass: 'lf-control-save',
        title: '',
        text: '保存',
        onClick: (lf, ev) => {
          const graphData = lf.getGraphData()
        //   this.$nextTick(() => {
        //     const res = {
        //       ...this.tranData(this.value),
        //       ...this.graphData
        //     }
        //     this.$emit('on-save', {
        //       json: res,
        //       xml: logicFlowJsonToSnakerXml(res)
        //     })
        //   })
        }
      });


    //设置拖转节点
    lf.extension.dndPanel.setPatternItems(modelNode);
    
    //渲染内容
    $.getJSON("data.json", function (data) {
        console.log(data);
        //渲染内容
        lf.renderRawData(data);
    });

    //图片处理渲染，下载图片有用
    lf.extension.snapshot.useGlobalRules = false;
    lf.extension.snapshot.customCssRules = `
        .lf-node-text-auto-wrap-content{
        line-height: 1.2;
        background: transparent;
        text-align: center;
        word-break: break-all;
        width: 100%;
        }
        .lf-canvas-overlay {
        background-color: transparent;
        }
    `;
    //点击事件
    lf.on("node:click,edge:click", (data) => {
        console.log(data);

        hidePropertyPanel();
    });
    lf.on("blank:click", (data) => {
        var traget = document.getElementById('test');//选取id为test的div元素
        traget.style.display="none";
    });

    //切换显示隐藏属性面板
    function hidePropertyPanel()
    {
        var traget = document.getElementById('test');//选取id为test的div元素
        if(traget.style.display=="none"){
            traget.style.display="block";
        }else{
            traget.style.display="none";
        }
    }

    //下载内容
    function download(filename, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);

        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();
        document.body.removeChild(element);
    }
    //下载xml
    function downloadXml()
    {
        const data = lf.getGraphData();
        download('logic-flow.xml', lfJson2Xml(data));
    }
    //下载json
    function downloadJson()
    {
        const json=lf.getGraphRawData();
        console.log(json);
        const data = JSON.stringify(json);
        download("logic-flow.txt", data);
    }
    //下载截图
    function downloadImage()
    {
        lf.getSnapshot();
    }
    //上传xml渲染
    function uploadXml(event) {
        const file = event.target.files[0]; 
        const reader = new FileReader()
        reader.readAsText(file, 'UTF-8');
        reader.onload = function(e){
            if (e.target) {
                const xml = e.target.result;
                console.log(xml);
                var json=lfXml2Json(xml);
                console.log(json);
                //将xml转成json渲染
                lf.render(json);
            }
        }
    }
</script>
</html>